<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>按钮特效</title>
<style>
    #container{
        width:450px;
        margin:50px auto;
    }
    .btn{
        outline: none;
        cursor:pointer;
        position: relative;
        width:100px;
        height:40px;
        border-radius:5px;
        text-align:center;
        line-height: 40px;
        font-size:18px;
        color:#fff;
        overflow: hidden;
    }
    .btn.btn-primary{
         background-color:#337ab7;
         border:1px solid #337ab7;
    }
    .btn.btn-secondary{
        border:1px solid #5bc0de;
        background-color:#5bc0de;
    }
    .btn.btn-warning{
        border:1px solid #f0ad4e;
        background-color:#f0ad4e;
    }
    .btn.btn-success{
        border:1px solid #5cb85c;
        background-color:#5cb85c;
    }
    .btn .mask{
        position:absolute;
        opacity: 1;
        background-color:#fff;
     }
 
    .btn .mask.to-left{
        height:100%;
        width:0;
        right:0px;
     }    
    .btn .mask.to-right{
        height:100%;
        width:0px;
        left:0px;
        border-top-right-radius: 40px;
     }    
    .btn .mask.to-spread{
        height:0%;
        width:0px;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        border-radius: 5px;
     }    
    .btn .mask.to-top{
        width:100%;
        height:0px;
        bottom:0px;
        left:0px;
     }
    .btn.btn-primary:hover span.mask{
        animation:btn-to-left 1s;
    } 
    .btn.btn-secondary:hover span.mask{
        animation:btn-to-right 1s;
    } 
    .btn.btn-warning:hover span.mask{
        animation:btn-to-spread 1s 1;
    } 
    .btn.btn-success:hover span.mask{
        animation:btn-to-top 1s 1;
    } 
    @keyframes btn-to-left{
        from{
            width:0px;
            opacity:1;
        }
        to{
            width:100%;
            opacity:0;
        }
    } 
    @keyframes btn-to-right{
        from{
            width:0px;
            opacity:1;
        }
        to{
            width:100%;
            opacity:0;
        }
    }     
    @keyframes btn-to-spread{
        from{
            width:0%;
            height:0%;
            opacity:1;
        }
        to{
            width:100%;
            height:200%;
            opacity:0;
        }
    }     
    @keyframes btn-to-top{
        from{
            height:0%;
            opacity:1;
        }
        to{
            height:100%;
            opacity:0;
        }
    }  
</style>
</head>
<body>
    <div id='container'>
        <button class='btn btn-primary'>按钮一
            <span class="mask to-left"></span>
        </button>
        <button class='btn btn-secondary'>按钮二
            <span class="mask to-right"></span>
        </button>
        <button class='btn btn-warning'>按钮三
            <span class="mask to-spread"></span>
        </button>
        <button class='btn btn-success'>按钮四
            <span class="mask to-top"></span>
        </button>
    </div>
</body>
</html>
